<template>
  <div class="customersend">
    <el-form :model="sendForm" ref="sendForm" label-width="100px" class="demo-sendForm">
      <el-form-item label="模板类型：">
        <el-select ref="templateNameRef" v-model="sendForm.templateName" size="small" placeholder="请选择短信模板" clearable filterable
          @visible-change="getSmsTemplatePageInfo" @keydown.native="selectBlur($event)">
          <el-option v-for="item in templateList" :key="item.id" size="small" :label="item.templateName" clearable
            :value="item.templateName">
            <span @click="cheackedTemplate(item)" style="display: block;">{{item.templateName}}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="短信内容：">
        <el-input v-model.trim="sendForm.content" type="textarea" size="small" style="width:400px" maxlength="200"
          show-word-limit :autosize="{ minRows: 4, maxRows:8}"></el-input>
      </el-form-item>

      <el-form-item label="手机号：">
        <!--    <el-input type="textarea" v-model="sendForm.phone" style="width:400px" maxlength="11" show-word-limit></el-input> -->
        <el-input v-model.trim="sendForm.phoneNumbers" type="textarea" size="small" style="width:400px" :autosize="{ minRows: 4, maxRows:6}"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(sendForm)">发送</el-button>
      </el-form-item>
    </el-form>
  </div>


</template>

<script>
  import {
    SmsTemplateNameAndContent,
    sendSms,
  } from "@/api/customer";
  export default {
    data() {
      return {
        sendForm: {
          templateName: '',
          content: '',
          phoneNumbers: '',
        },
        templateList: [],
      };
    },
    created() {
      window.addEventListener("keydown",this.keyupEnter);
    },
    methods: {
      getSmsTemplatePageInfo() {
        SmsTemplateNameAndContent({type:99}).then(res => {
          this.templateList = res.data.data;
        })
      },
      submitForm(formName) {



        if (formName.templateName == '') {
          this.$message({
            showClose: true,
            message: "请选择短信模板",
            type: "warning"
          });
          return false
        } else if (formName.content == '') {
          this.$message({
            showClose: true,
            message: "请输入短信内容",
            type: "warning"
          });
          return false

        } else if (formName.phoneNumbers == '') {
          this.$message({
            showClose: true,
            message: "请输入手机号",
            type: "warning"
          });
          return false
        } else {

          sendSms(formName).then(res => {
            // console.log(res, 'res')
            if (res.data.code == 200) {
              this.$message({
                showClose: true,
                message: "发送短信成功",
                type: "success"
              });
              formName.templateName = '';
              formName.content = '';
              formName.phoneNumbers = '';
            } else {
              this.$message({
                showClose: true,
                message: "发送短信失败",
                type: "warning"
              });
            }
          })
        }
      },
      cheackedTemplate(val) {
        this.sendForm.content = val.templateContent
      },
      // 回车事件
      keyupEnter(){
        if(window.event.keyCode == 13 ){
          this.submitForm(this.sendForm);// 查询事件
        }
      },
      // 选择框回车失焦
      selectBlur(e) {
        if(e.keyCode == 13) {
          this.$refs['templateNameRef'].blur();
          e.returnValue = false;
        }
      }
    },
    destroyed() {
      window.removeEventListener("keydown",this.keyupEnter);
    },
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {
      window.addEventListener("keydown",this.keyupEnter);
    },
    deactivated() {
      window.removeEventListener("keydown",this.keyupEnter);
    }
  }
</script>

<style lang="scss">
  .customersend {
    padding: 20px;

    .el-form-item__label:before {
      content: '*';
      color: #F56C6C;
      margin-right: 4px;
    }
  }
</style>
